import React, { Component } from 'react';
import { Card, Row, Col, Modal, Form, Input, Tooltip, Button, Space } from 'antd'
import styles from '../style.less'
import { IconFont } from '@utils/request';
import { CheckCircleOutlined, InfoCircleOutlined, MobileOutlined, MailOutlined, FolderOutlined } from '@ant-design/icons';
import method_RegExp from '@component/smartlab-login-component/method/resExp';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            MonitorVisible: false,
            type: true,//true完善，false编辑
            status: false,
            count: 60
        }
    }
    handleClick = () => {
        let timer = null;
        timer = setTimeout(() => {
            if (this.state.count === 1) {
                clearTimeout(timer);
                timer = null;
                this.setState({ status: false, count: 60 })
                return;
            }
            this.setState({ status: true, count: this.state.count - 1 })
        }, 1000);
    };

    render() {
        let regPos = /^\d+$/;
        var reg = /^(\d{3})\d{4}(\d{4})$/; //隐藏电话号码中间四位的正则表达式
        const { personalCenter } = this.props
        const { count, status } = this.state
        return (
            <Card
                title={
                    <span>
                        <IconFont type="icon-bangdingyouxiang1" style={{ fontSize: "20px", marginRight: '10px' }} />
                        绑定邮箱
                    </span>
                }
                bordered={false}
                headStyle={{ fontSize: "13px" }}
            >
                <Row gutter={16} className={styles.rowLayout}>
                  
                    <Col span={20}>
                        {data.email ? (
                            <span style={{ fontSize: "10px" }}>
                                您已绑定了邮箱
                                <span style={{ color: 'rgb(91, 185, 72)' }}>{this.hideEmailInfo(data.email)}</span>
                            </span>
                        ) : (
                                <span style={{ fontSize: "10px" }}>邮箱绑定后可用来接收系统发送的各类消息通知。</span>
                        )}
                    </Col>
                    <Col span={4}>
                        {data.email ? (
                            <span className={styles.one}>
                                <CheckCircleOutlined />
                                <span> 已设置</span>
                            </span>
                        ) : (
                            <span className={styles.four}>
                                <InfoCircleOutlined />
                                <span> 未设置</span>
                            </span>
                        )}
                        <span className={styles.two}> | </span>
                        {data.email ? (
                            <span className={styles.three} onClick={() => this.setState({ MonitorVisible: true, type: false })}>
                                修改
                            </span>
                        ) : (
                                <span className={styles.three} onClick={() => this.setState({ MonitorVisible: true, type: true })}>
                                设置
                            </span>
                        )}
                    </Col>
                </Row>
                <Modal
                    title={this.state.type ? '绑定邮箱' : '修改邮箱'}
                    destroyOnClose
                    visible={this.state.MonitorVisible}
                    onCancel={() => this.setState({ MonitorVisible: false })}
                    centered
                    footer={null}
                >
                    {
                        this.state.type == true ? (
                            <Form
                                onFinish={this.onFormCreateOk}
                            >
                                <Form.Item
                                    name={['email']}
                                    rules={[
                                        { required: true, pattern: method_RegExp("Email"), message: '请输入正确的邮箱' }
                                    ]}
                                >
                                    <Input prefix={<FolderOutlined />} placeholder='请输入邮箱' style={{ height: "5vh" }} />
                                </Form.Item>
                                <Form.Item
                                    name={['code']}
                                    rules={[
                                        { required: true, message: '请输入你的短信验证码!' },
                                        {
                                            pattern: /^([0-9]{6})\d$/,
                                            message: '请填写正确的六位验证码!',
                                        },
                                    ]}
                                >
                                    <Row justify='space-between'>
                                        <Col span={16}>
                                            <Input prefix={<MailOutlined />} placeholder="请输入短信验证码" style={{ height: "5vh" }} />
                                        </Col>
                                        <Col >
                                            <Tooltip title="验证码一分钟只能发送一次，且验证码有效时间为15分钟">
                                                <Button
                                                    disabled={status}
                                                    onClick={this.handleClick}
                                                    style={{
                                                        height: "5vh",
                                                    }}
                                                    type="primary"
                                                    size="large"
                                                >
                                                    {
                                                        !status ?
                                                            "点击获取验证码" :
                                                            `${count}s后重新获取`
                                                    }
                                                </Button>
                                            </Tooltip>
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item>
                                    <Space style={{ float: 'right' }}>
                                        <Button type='primary' ghost htmlType='submit'>开始绑定</Button>
                                        <Button type='primary' ghost htmlType='button' onClick={() => this.setState({ MonitorVisible:false })} danger>取消</Button>
                                    </Space>
                                </Form.Item>
                            </Form>
                        ) : (
                            <Form
                                onFinish={this.onFormCreateOk}
                            >
                                <Form.Item
                                    name={['email']}
                                    rules={[
                                        { required: true, pattern: method_RegExp("Email"), message: '请输入正确的邮箱' }
                                    ]}
                                >
                                        <Input prefix={<FolderOutlined />} placeholder='请输入邮箱' style={{ height: "5vh" }} />
                                </Form.Item>
                                <Form.Item
                                    name={['code']}
                                    rules={[
                                        { required: true, message: '请输入你的短信验证码!' },
                                        {
                                            pattern: /^([0-9]{6})\d$/,
                                            message: '请填写正确的六位验证码!',
                                        },
                                    ]}
                                >
                                    <Row justify='space-between'>
                                        <Col span={16}>
                                                <Input prefix={<MailOutlined />} placeholder="请输入短信验证码" style={{ height: "5vh" }} />
                                        </Col>
                                        <Col >
                                            <Tooltip title="验证码一分钟只能发送一次，且验证码有效时间为15分钟">
                                                <Button
                                                    disabled={status}
                                                    onClick={this.handleClick}
                                                    style={{
                                                        height: "5vh",
                                                    }}
                                                    type="primary"
                                                    size="large"
                                                >
                                                    {
                                                        !status ?
                                                            "点击获取验证码" :
                                                            `${count}s后重新获取`
                                                    }
                                                </Button>
                                            </Tooltip>
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item>
                                    <Space style={{ float: 'right' }}>
                                        <Button type='primary' ghost htmlType='submit'>开始绑定</Button>
                                        <Button type='primary' ghost htmlType='button' onClick={() => this.setState({ MonitorVisible: false })} danger>取消</Button>
                                    </Space>
                                </Form.Item>
                            </Form>
                        )
                    }
                </Modal>
            </Card>           
        );
    }

}
export default Index;
const data=[
    {
        email:"1640686441@qq.com"
    }
]